<template>

  <div class="loginPage" id="home">

    <div class="videoBg">
      <video id="video" loop="true" muted class="videoBg" autoplay="autoplay" controls="controls">
        <source src="./assets/bg.mp4" type="video/mp4"/>
      </video>
    </div>

    <div class="loginBodyCenter">
      <login></login>
    </div>

  </div>

</template>

<script>

import login from "./components/loginMain/index.vue";

export default {
  data() {
    return {}
  },
  components: {login},
  mounted: function () {
  },
  computed: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.loginPage {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  z-index: 1;
  //background: url("assets/bg.jpg") no-repeat;
  //background-size: 100% 100%;

  .loginBodyCenter {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    position: relative;
  }
}
.videoBg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  object-fit: fill;
  z-index: -1;
  top: 0;
  left: 0;
  //屏蔽播放按钮
  video::-webkit-media-controls {
    display: none !important;
  }
}

</style>
